import React, {useEffect, useMemo, useState} from 'react'
import {Form, Row, Col, Input, Select,message} from 'antd'

import Styles from './index.less'
import {
	createNo,
	getFirstChannelType,
	getSecondChannelType,
} from '@/service/channel'

interface BasicsType {
	pageType: string
	basicsForm: any
	detailRecord: Record<string, string>
}

const {Option} = Select

export function Basics({pageType, basicsForm, detailRecord}: BasicsType) {
	const [firstChannelType, setFirstChannelType] = useState([])

	const [secondChannelType, setSecondChannelType] = useState([])

	const [ditchNo, setDitchNo] = useState('')

	const getDitchNo = () => {
		createNo().then((res: any) => {
			if (res.data) {
				setDitchNo(res.data)
			}
		})
	}

	useEffect(() => {
		getDitchNo()
	}, [])

	const initialValues = useMemo(() => {
		let value: any = {}
		if (pageType) {
			value = detailRecord
			// if (value.channelType) {
			// 	const channelType = value.channelType.split(',')
			// 	value.firstLevelType = channelType[0]
			// 	value.secondLevelType = Number(channelType[1])
			// 	delete value.channelType
			// }
			if (value.firstLevelType) {
				getSecondChannelType({
					type: value.firstLevelType,
				}).then((res: any) => {
					if (res.success) {
						setSecondChannelType(res.data)
					}
				})
			}
		} else {
			value = {ditchNo}
		}
		setTimeout(() => basicsForm.resetFields(), 1)
		return value
	}, [ditchNo, detailRecord])

	useEffect(() => {
		getFirstChannelType().then((res: any) => {
			if (res.success) {
				setFirstChannelType(res.data)
			}
		})
	}, [])

	return (
		<div className={Styles.basics}>
			<div className={Styles.titleBox}>基础信息</div>
			<div className={Styles.formBox}>
				<Form
					layout="horizontal"
					labelCol={{flex: '140px'}}
					labelAlign="right"
					labelWrap
					autoComplete="off"
					name="PersonalInformationFom"
					form={basicsForm}
					initialValues={initialValues}
					disabled>
					<Row>
						<Col span={8}>
							<Form.Item
								label="结算单号"
								name="id"
								rules={[{required: true}]}>
								<Input placeholder="自动生成" disabled />
							</Form.Item>
						</Col>
						<Col span={8}>
							<Form.Item
								label="渠道名称"
								name="ditchName"
								rules={[{required: true}]}>
								<Input placeholder="请选择" />
							</Form.Item>
						</Col>
						<Col span={8}>
							<Form.Item
								label="AMC一级渠道类型"
								name="firstLevelType"
								rules={[{required: true}]}>
								<Select placeholder="请选择">
									{firstChannelType.map((item: any) => (
										<Option value={item.type}>
											{item.valueName}
										</Option>
									))}
								</Select>
							</Form.Item>
						</Col>
						<Col span={8}>
							<Form.Item
								label="主体"
								name="subjectName"
								rules={[{required: true}]}>
								{/* <Select
									placeholder="请选择"
									disabled={disabled}
									allowClear
									onChange={subjectOnchange}>
									{subjectList.map((item: any) => (
										<Option value={item?.id}>
											{item?.merchantName}
										</Option>
									))}
								</Select> */}
								<Input />
							</Form.Item>
						</Col>
						<Col span={8}>
							<Form.Item
								label="城市"
								name="cityName"
								rules={[{required: true}]}>
								{/* <Cascader
									fieldNames={cityNames}
									options={citysList}
									placeholder="请选择"
									disabled={disabled}
									onChange={onCitysChange}
								/> */}
								<Input />
							</Form.Item>
						</Col>
						<Col span={8}>
							<Form.Item
								label="AMC二级渠道类型"
								name="secondLevelType"
								rules={[{required: true}]}>
								<Select placeholder="请选择">
									{secondChannelType.map((item: any) => (
										<Option value={Number(item.value)}>
											{item.valueName}
										</Option>
									))}
								</Select>
							</Form.Item>
						</Col>
					</Row>
					<Row>
						<Col span={8}>
							<Form.Item
								label="结算时间"
								name="settlementTime"
								rules={[{required: true}]}>
								<Input placeholder="请输入" />
							</Form.Item>
						</Col>

						<Col span={8}>
							<Form.Item label="创建时间" name="createTime">
								<Input placeholder="请输入" />
							</Form.Item>
						</Col>
						<Col span={8}>
							<Form.Item label="结算总额" name="amountSum">
								<Input placeholder="请输入" />
							</Form.Item>
						</Col>
					</Row>

					<Row>
						<Col span={24}>
							<Form.Item label="描述" name="remarks">
								<Input.TextArea rows={6} />
							</Form.Item>
						</Col>
					</Row>
					<Form.Item
						label="1"
						name="cityName"
						style={{display: 'none'}}>
						<Input />
					</Form.Item>
					<Form.Item
						label="2"
						name="orgName"
						style={{display: 'none'}}>
						<Input />
					</Form.Item>
					<Form.Item
						label="3"
						name="subjectName"
						style={{display: 'none'}}>
						<Input />
					</Form.Item>
				</Form>
			</div>
		</div>
	)
}
